﻿<div class="ui-widget-content">
    <h3>Selectable - Eventos</h3>
    <p>O selectable contém alguns eventos importantes:
        <ul>
            <li><tt>start</tt> - Quando o usuário começa a selecionar um elementos.</li>
            <li><tt>stop</tt> - Quando o usuário termina de selecionar um elementos.</li>
            <li><tt>selecting, selected</tt> - Quando o usuário está selecionando ou selecionou um elemento.</li>
            <li><tt>unselecting, unselected</tt> - Quando o usuário está deselecionando ou deselecionou um elemento.</li>
        </ul>
    </p>

    <p>
        Para saber quais são os elementos selecionados em um selectable, pode-se selecioná-los por meio da classe "ui-selected".
        A classe "ui-selecting" é adicionada a elementos que estão sendo selecionados. Por exemplo:
    </p>
    <pre>var itensSelecionados = $("#meu_selectable .ui-selected");</pre>

    <p>Eis um exemplo prático: <span id="frutas_selecionadas">Nenhuma fruta foi selecionada</span>.</p>

    <ol id="selectable_evento" style="list-style-type: none;">
        <li id="selectable_evento_1" class="ui-widget-content">abacaxi</li>
        <li id="selectable_evento_2" class="ui-widget-content">açaí</li>
        <li id="selectable_evento_3" class="ui-widget-content">banana</li>
        <li id="selectable_evento_4" class="ui-widget-content">ingá</li>
        <li id="selectable_evento_5" class="ui-widget-content">morango</li>
        <li id="selectable_evento_6" class="ui-widget-content">pêra</li>
        <li id="selectable_evento_7" class="ui-widget-content">uva</li>
    </ol>

    <p>
        <textarea id="log_selectable" style="width: 400px; height: 100px"></textarea>
    </p>

    <style type="text/css" rel="stylesheet">
        #selectable_evento .ui-selecting { background: #FECA40; }
        #selectable_evento .ui-selected { background: #F39814; color: white; }
        #selectable_evento { list-style-type: none; margin: 0; padding: 0; width: 60%; }
        #selectable_evento li { padding: 1px; }
    </style>

    <script type="text/javascript">
        inicializador.selectableEventos = function() {
            function mostraSelecao() {
                var resultado = "";
                $("#selectable_evento .ui-selected").each(function() {
                    if (resultado != "") resultado += ", ";
                    resultado += $(this).html();
                });
                $("#frutas_selecionadas")
                        .html(resultado == "" ? "Nenhuma fruta foi selecionada" : "Você selecionou " + resultado);
            }

            function addLog(texto) {
                $("#log_selectable").html($("#log_selectable").html() + "\n" + texto);
            }

            var selectingItem = null;
            $("#selectable_evento").selectable({
                start: function(event, ui) {
                    addLog("Iniciando a seleção de itens.");
                },
                stop: function(event, ui) {
                    addLog("Finalizando a seleção de itens.");
                    mostraSelecao();
                },
                selected: function(event, ui) {
                    addLog("Selecionado " + selectingItem.html() + ".");
                },
                unselected: function(event, ui) {
                    addLog("Deselecionado " + selectingItem.html() + ".");
                },
                selecting: function(event, ui) {
                    selectingItem = $(".ui-selecting");
                    addLog("Selecionando " + selectingItem.html() + ".");
                },
                unselecting: function(event, ui) {
                    addLog("Deselecionando " + selectingItem.html() + ".");
                },
            });
        };
    </script>
</div>